<template>
  <AppTitle title="添加账号"></AppTitle>
  <div class="form-box">
  <div class="form">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="ruleForm.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="用户组" prop="userGroup">
        <el-select v-model="ruleForm.userGroup" placeholder="请选择用户组">
          <el-option label="超级管理员" value="超级管理员" />
          <el-option label="普通管理员" value="普通管理员" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">
          添加
        </el-button>
        <el-button @click="resetForm(ruleForm)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script setup>
import AppTitle from '@/components/AppTitle.vue';
import { accountAdd } from '@/api/account';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const ruleFormRef = ref();
const ruleForm = reactive({
  account: '',
  password: '',
  userGroup: ''
});

const rules = reactive({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  userGroup: [
    { required: true, message: '请选择用户组', trigger: 'change' }
  ]
});

const submitForm = async () => {
  console.log(ruleForm);
  let res = await accountAdd(ruleForm);
  if (res.code === 0) {
    ElMessage.success(res.msg);
  } else {
    ElMessage.error(res.msg);
  }
  console.log(res);
};

const resetForm = () => {
  if (ruleForm) {
    ruleForm.account="";
    ruleForm.password="";
    ruleForm.userGroup="";
  }
};
</script>

<style lang="scss" scoped>
.form-box {
  width: 100%;
  height: 252px;
  overflow: hidden;
}
.form {
  width: 100%;
  height: 252px;
  padding: 15px;
}
.el-form-item:nth-last-child(1) {
  margin-left: 50px;
}
:deep(.el-form) {
  width: 400px;
  height: 230px;
  margin-left: 46px;
}
</style>